<template>
  <div>
    <!-- 查询窗口 -->
    <el-form
      ref="queryForm"
      :model="queryParams"
      class="form"
    >
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="refundNo"
            label-width="250px"
          >
            <label
              slot="label"
            >{{$t('trade_returnmanage_returnmanage_531')}}</label>
            <el-input
              v-model="queryParams.refundNo"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            size="small"
            prop="saleNo"
            label-width="180px"
          >
            <label
              slot="label"
            >{{$t('trade_returnmanage_returnmanage_532')}}</label>
            <el-input
              v-model="queryParams.saleNo"
              clearable
              style="width: 190px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第二行 -->
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item
            :label="$t('trade_returnmanage_returnmanage_533')"
            size="small"
            prop="kind"
            label-width="250px"
          >
            <el-select
              v-model="queryParams.kind"
              :placeholder="$t('trade_returnmanage_returnmanage_534')"
            >
              <el-option
                v-for="item in KindOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item
            :label="$t('trade_returnmanage_returnmanage_535')"
            size="small"
            prop="createTime"
            label-width="180px"
          >
            <el-date-picker
              v-model="createTime"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-:separator="$t('trade_returnmanage_returnmanage_536')"
              start-:placeholder="$t('trade_returnmanage_returnmanage_537')"
              end-:placeholder="$t('trade_returnmanage_returnmanage_538')"
              style="width: 350px"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 第三行 -->
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item size="small">
            <el-button
              type="primary"
              class="query"
              @click="handleQuery"
            >{{$t('trade_returnmanage_returnmanage_539')}}</el-button>
            <el-button
              type="primary"
              style="width: 60px; margin-left: 40px"
              @click="resetQuery"
            >{{$t('trade_returnmanage_returnmanage_540')}}</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 数据展示Table -->
    <el-table
      v-loading="loading"
      border
      :data="dataList"
      style="border: 1px solid rgb(211 211 211); margin-left: 20px; width: 96%"
    >
      <el-table-column
        type="index"
        :label="$t('trade_returnmanage_returnmanage_541')"
        width="120"
        align="center"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_531')"
        align="center"
        prop="refundNo"
        width="195"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_532')"
        align="center"
        prop="saleNo"
        width="190"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_542')"
        align="center"
        prop="kind"
        width="130"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.kind == 1">{{$t('trade_returnmanage_returnmanage_543')}}</el-tag>
          <el-tag
            v-if="scope.row.kind == 2"
            type="warning"
          >{{$t('trade_returnmanage_returnmanage_544')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_545')"
        align="center"
        prop="reason"
        width="150"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_546')"
        align="center"
        prop="amount"
        width="150"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_547')"
        align="center"
        prop="type"
        width="130"
      >
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.type == 1"
            type="success"
            effect="dark"
          >{{$t('trade_returnmanage_returnmanage_548')}}</el-tag>
          <el-tag
            v-if="scope.row.type == 2"
            effect="dark"
          >{{$t('trade_returnmanage_returnmanage_549')}}</el-tag>
          <el-tag v-if="scope.row.type != 2 && scope.row.type != 1">{{$t('trade_returnmanage_returnmanage_550')}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_551')"
        align="center"
        prop="createTimeString"
        width="160"
      />
      <el-table-column
        :label="$t('trade_returnmanage_returnmanage_552')"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <el-link
            type="warning"
            @click="handleItemDetails(scope.row)"
          >{{$t('trade_returnmanage_returnmanage_553')}}</el-link>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页加载 -->
    <el-pagination
      :current-page="showAllParams.current"
      :page-sizes="[5, 10, 20]"
      :page-size="showAllParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 商品弹窗，默认不显示 -->
    <el-dialog
      :title="$t('trade_returnmanage_returnmanage_554')"
      :visible.sync="itemListOpen"
      width="800px"
      append-to-body
    >
      <h3
        v-if="kind == 2"
        style="margin-left: 20px"
      >{{$t('trade_returnmanage_returnmanage_555')}}</h3>
      <h3
        v-if="kind == 1"
        style="margin-left: 20px"
      >{{$t('trade_returnmanage_returnmanage_556')}}</h3>
      <el-table
        border
        :data="beforeItemList"
        style="
          border: 1px solid rgb(211 211 211);
          margin-left: 20px;
          width: 96%;
        "
        row-key="id"
      >
        <el-table-column
          :label="$t('trade_returnmanage_returnmanage_541')"
          align="center"
          type="index"
          width="60"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_557')"
          align="center"
          prop="productName"
          width="280"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_558')"
          align="center"
          prop="price"
          width="90"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_559')"
          align="center"
          prop="color,size"
          width="180"
        >
          <template slot-scope="scope">
            [{{ scope.row.color }},{{ scope.row.size }}]
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_560')"
          align="center"
          prop="quantity"
        />
      </el-table>
      <h3
        v-if="kind == 2"
        style="margin-left: 20px"
      >{{$t('trade_returnmanage_returnmanage_561')}}</h3>
      <el-table
        v-if="kind == 2"
        ref="exchangeList"
        :data="afterItemList"
        border
        style="
          border: 1px solid rgb(211 211 211);
          margin-left: 20px;
          width: 96%;
        "
        row-key="id"
      >
        <el-table-column
          :label="$t('trade_returnmanage_returnmanage_541')"
          align="center"
          type="index"
          width="60"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_557')"
          align="center"
          prop="productName"
          width="280"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_558')"
          align="center"
          prop="price"
          width="90"
        />
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_559')"
          align="center"
          prop="color,size"
          width="180"
        >
          <template slot-scope="scope">
            [{{ scope.row.color }},{{ scope.row.size }}]
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('trade_returnmanage_returnmanage_560')"
          align="center"
          prop="quantity"
        />
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="itemListOpen = false">{{$t('trade_returnmanage_returnmanage_562')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryRefund, getRefundItem } from "@/api/refund";
export default {
  data() {
    return {
      loading: false,
      // 查询参数
      queryParams: {
        current: 1,
        pageSize: 5,
        saleNo: "",
        refundNo: "",
        kind: "",
        startTime: " ",
        endTime: " ",
      },
      KindOptions: [
        { value: "1", label: this.$t('trade_returnmanage_returnmanage_543') },
        { value: "2", label: this.$t('trade_returnmanage_returnmanage_544') },
      ],
      kind: "",
      // 查询时间数组
      createTime: [],
      // 展示所有支付参数
      showAllParams: {
        current: 1,
        pageSize: 10,
      },
      dataList: [
      ],
      // 售后数据总条数
      total: 0,
      itemListOpen: false,
      beforeItemList: [],
      afterItemList: [],
    };
  },
  created() {
    this.getAllRefunds();
  },
  methods: {
    getAllRefunds() {
      this.loading = true;
      queryRefund(this.showAllParams).then((response) => {
setTimeout(() => {
      this.dataList = response.data.records;
      // console.log(this.dataList);
      this.loading = false;
      this.total = Number(response.data.total);
    }, 300); // 2000毫秒 = 2秒
  });
    },
    // 处理分页操作
    handleSizeChange(val) {
      this.showAllParams.pageSize = val
      this.getAllRefunds()

    },
    handleCurrentChange(val) {
      this.showAllParams.current = val
      this.getAllRefunds()
    },
    //处理查询售后记录
    handleQuery() {
      this.loading = true;
      const queryParams = { ...this.queryParams };
      queryParams.startTime = this.createTime[0];
      queryParams.endTime = this.createTime[1];
      queryRefund(queryParams).then((response) => {
        this.dataList = response.data.records;
        // console.log(this.dataList);
        this.loading = false;
      });
    },
    //清空查询框
    resetQuery() {
      this.$refs.queryForm.resetFields();
      this.createTime = [];
      this.getAllRefunds()
    },
    //处理查询售后相关商品详情
    handleItemDetails(row) {
      this.itemListOpen = true;
      this.kind = row.kind;
      // console.log(row);
      getRefundItem(row.id).then((response) => {
        // console.log(response.data);
        const data = response.data;
        if (data.kind == 1) {
          this.kind = 1;
          this.beforeItemList = data.refundItems;
        } else {
          this.kind = 2;
          this.beforeItemList = data.beforeExchange;
          this.beforeItemList.forEach((item) => {
            item.quantity = Math.abs(Number(item.quantity)).toString();
          })
          // console.log(this.beforeItemList);
          this.afterItemList = data.afterExchange;
        }
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.form {
  border: 2px dashed rgb(211, 211, 211);
  padding: 20px;
  padding-bottom: 0px;
  margin: 10px 20px 20px 20px;
}
.query {
  margin-left: 30px;
  width: 60px;
}
.page {
  margin-top: 5px;
  margin-left: 280px;
}
</style>
